<template>
  <section class="ali_serve " :style="aliServe">
  <div class="main-width cl">
    <h1 class="content_region_title">联系我们</h1>
    <div class="contact-l">
      <ul class="ul-contact">
        <li class="li1" :style="{backgroundImage: 'url('+iconLi+')',backgroundRepeat: 'no-repeat'}">
          重庆市沙坪坝区西永微电园康田国际企业港13-8</li>
        <li class="li2" :style="{backgroundImage: 'url('+iconLi+')',backgroundRepeat: 'no-repeat'}">15023013318/400-669-0960</li>
        <li class="li3" :style="{backgroundImage: 'url('+mail+')',backgroundRepeat: 'no-repeat'}"><a href="mailto:biz@shuoyeah.com"> biz@shuoyeah.com</a></li>
      </ul>
    </div>
    <div class="contact-r">
      <el-form ref="form" :inline="true">
        <div class="">
          <el-input v-model="form.managerName" placeholder="您的姓名" clearable size="small" maxlength="30" show-word-limit/>
          <el-input v-model="form.managerPhone" placeholder="您的手机号" clearable size="small" maxlength="11" show-word-limit style="margin-left: 1%"/>
        </div>
        <el-input v-model="form.managerContent" placeholder="简单描述一下您的需求，为了便于更好地为您服务，您可以致电15023013318与我们洽谈！" clearable size="small" type="textarea" rows="5" maxlength="500" show-word-limit/>
        <el-button type="primary" :loadimg="loadBtn" size="mini" @click="submitForm">提交您的需求</el-button>
      </el-form>
      <div class="toast" style="display: none;width: 150px;">
        <p class="toast_content"></p>
      </div>
    </div>
  </div>
  </section>
</template>

<script>
import {homeMethod} from '@/utils/models/index.js'
const crudMethod = new homeMethod();
export default {
  data() {
    return {
      loadBtn: false,
      aliServe: {
        backgroundImage: require('@/assets/images/ali_serve.png'),
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'bottom center',
        backgroundSize: 'cover'
      },
      iconLi: require('@/assets/images/icon.png'),
      mail: require('@/assets/images/mail.png'),
      form: {
        managerContent: '',
        managerId: null,
        managerName: '',
        managerPhone: '',
        managerType: '1'
      }
    }
  },
  methods:{
    submitForm() {
      let _this =this
      if(!_this.form.managerName) {
        _this.$message.error('请输入您的您的姓名');
        return
      }
      if(!_this.form.managerPhone) {
        _this.$message.error('请输入您的手机号码');
        return
      }
      if(!_this.form.managerContent) {
        _this.$message.error('为了便于更好地为您服务，请输入您的需求');
        return
      }
      _this.loadBtn = true
      crudMethod.doManager(_this.form).then((res) => {
        _this.loadBtn = false
        let {msg, code, data} = res.data;
        if(code === 200) {
          _this.$message.success(msg);
          _this.form.managerName = ''
          _this.form.managerPhone = ''
          _this.form.managerContent = ''
        }
      })
    }

  }
}
</script>

<style scoped>

</style>
